import React,{Component} from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {useNavigate} from 'react-router-dom'
import { Button, Form, Input } from 'antd';
import {getloginApi} from '../apis/user.js'
import stlyes from '../assets/styles/index.module.css'
export default function LoginPage() {
  const navigate = useNavigate()
  const onFinish = async (values) => {
    console.log('Received values of form: ', values);
  try {
    const res = await getloginApi({
      username:values.username,
      password:values.password
    })
    // console.log(res)
    const {token,user} = res.data
    // console.log(token,user);
    localStorage.token = token
    localStorage.user = JSON.stringify(user)
     navigate('/home')
  } catch (error) {
    console.log(error)
  }

  };


  return (
  <div className={stlyes.fatherbox}>
   <div className={stlyes.box}>
   
    <div className={stlyes.logo}>
    <img  className={stlyes.pic} src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
      <span className={stlyes.world} >赤兔养车</span>
      </div>
    <div className={stlyes.smallbox}>
      <div  className={stlyes.smallbox1}>
      账号密码登录
      </div>
       <div  className={stlyes.smallbox1}>
      手机号登录
      </div>
    </div>

    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <Form.Item
      className={stlyes.length}
        name="username"
        rules={[
          {
            required: true,
            message: '请输入你的用户名！',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
      </Form.Item>
      <Form.Item
       className={stlyes.length}
        name="password"
        rules={[
          {
            required: true,
            message: '请输入你的密码！',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="密码"
        />
      </Form.Item>


      <Form.Item >
        <Button type="primary" htmlType="submit"  
        className={stlyes.length} >
         登录
        </Button>
       
      </Form.Item>
    </Form>
   </div> 
   </div>
  )
}

